<template>
  <PageLayout title="工作台">
    <a-flex  justify="space-between">
      <div class="col-left">
        <a-card :loading="loading" title="动态" :bodyStyle="{padding: '12px 24px'}">
          <a-list item-layout="horizontal" :data-source="dynamicData">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta
                  description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                >
                  <template #title>
                    <a>{{ item.title }}</a>
                  </template>
                  <template #avatar>
                    <a-avatar src="" />
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </div>
      <div class="col-right">
        <a-card :loading="loading" title="雷达指数">
          <Radar />
        </a-card>
        <a-card :loading="loading" title="快速导航" style="margin-top: 12px;" :body-style="{padding: '6px'}">
          <div class="item-group">
            <a>操作一</a>
            <a>操作二</a>
            <a>操作三</a>
            <a>操作四</a>
            <a>操作五</a>
            <a>操作六</a>
            <a-button size="small" type="primary" ghost :icon="h(PlusOutlined)" >添加</a-button>
          </div>
        </a-card>
      </div>
    </a-flex>
  </PageLayout>
</template>

<script setup>
import PageLayout from '@/components/page/PageLayout.vue'
import { PlusOutlined } from '@ant-design/icons-vue';
import { h, reactive, ref } from 'vue'
import Radar from './components/Radar.vue'
const loading = ref(false)
const dynamicData = ref([])
const navData = ref([])

// 模拟初始化
const init = () => {
  loading.value = true
  setTimeout(() => {
    dynamicData.value = reactive([
      {
        title: 'Ant Design Title 1',
      },
      {
        title: 'Ant Design Title 2',
      },
      {
        title: 'Ant Design Title 3',
      },
      {
        title: 'Ant Design Title 4',
      },
      {
        title: 'Ant Design Title 5',
      },
      {
        title: 'Ant Design Title 6',
      },
      {
        title: 'Ant Design Title 7',
      },
      {
        title: 'Ant Design Title 8',
      },
    ])
    navData.value = reactive(['分析页', '表单页', '操作一', '操作二', '操作三'])
    loading.value = false
  }, 600);
}
init()

</script>

<style lang="less" scoped>
.col-left{
  width: calc(100% / 3 * 2);
  padding: 0 12px;
}
.col-right{
  width: calc(100% / 3);
  padding: 0 12px;
}
.item-group{
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: inherit;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}
.header{
  .title{
    font-size: 20px;
    color: rgba(0,0,0,.85);
    margin-bottom: 16px;
  }
  .info{
    color: rgba(0,0,0,.45);
  }
  .account{
  }
}

</style>